/*
 * relative     : e:\Code\CaseManagement\case-management-web\src\unocss\variants.ts
 * Author       : 郭鹏超
 * Date         : 2024-08-24 15:02
 * LastEditors  : 郭鹏超
 * LastEditTime : 2024-11-09 17:22
 * Description  :变体
 * CodeIterationRecord:
 */
const variants: any[] = [
  /**
   * 选择子级为指定标签的元素
   * 用法示例: sons-html-div:bg-red-500
   * 这将选择所有 div 元素并应用 bg-red-500 样式
   */
  (matcher) => {
    const parentPrefix = "sons-html-";
    if (!matcher.startsWith(parentPrefix)) return matcher;

    // 提取标签名和实际的样式匹配器
    const [tag, ...rest] = matcher.slice(parentPrefix.length).split(":");
    const newMatcher = rest.join(":");

    return {
      matcher: newMatcher, // 去掉 'sons-html-<tag>:' 前缀
      selector: (s) => `${s} ${tag}` // 选择子级为指定标签的元素
    };
  },

  /**
   * 选择直接子级为指定标签的元素
   * 用法示例: son-html-div:bg-blue-500
   * 这将选择所有直接子级 div 元素并应用 bg-blue-500 样式
   */
  (matcher) => {
    const parentPrefix = "son-html-";
    if (!matcher.startsWith(parentPrefix)) return matcher;

    // 提取标签名和实际的样式匹配器
    const [tag, ...rest] = matcher.slice(parentPrefix.length).split(":");
    const newMatcher = rest.join(":");

    return {
      matcher: newMatcher, // 去掉 'son-html-<tag>:' 前缀
      selector: (s) => `${s} > ${tag}` // 选择直接子级为指定标签的元素
    };
  },

  /**
   * 选择子级为指定类名的元素
   * 用法示例: sons-class-my-class:bg-green-500
   * 这将选择所有子级具有 my-class 类的元素并应用 bg-green-500 样式
   */
  (matcher) => {
    const parentPrefix = "sons-class-";
    if (!matcher.startsWith(parentPrefix)) return matcher;

    // 提取类名和实际的样式匹配器
    const [className, ...rest] = matcher.slice(parentPrefix.length).split(":");
    const newMatcher = rest.join(":");

    return {
      matcher: newMatcher, // 去掉 'sons-class-<class>:' 前缀
      selector: (s) => `${s} .${className}` // 选择子级为指定类名的元素
    };
  },

  /**
   * 选择直接子级为指定类名的元素
   * 用法示例: son-class-my-class:bg-yellow-500
   * 这将选择所有直接子级具有 my-class 类的元素并应用 bg-yellow-500 样式
   */
  (matcher) => {
    const parentPrefix = "son-class-";
    if (!matcher.startsWith(parentPrefix)) return matcher;

    // 提取类名和实际的样式匹配器
    const [className, ...rest] = matcher.slice(parentPrefix.length).split(":");
    const newMatcher = rest.join(":");

    return {
      matcher: newMatcher, // 去掉 'son-class-<class>:' 前缀
      selector: (s) => `${s} > .${className}` // 选择直接子级为指定类名的元素
    };
  },

  /**
   * 选择指定标签的第 index 个元素
   * 用法示例: nth-son-html-div-2:bg-purple-500
   * 这将选择所有 div 元素的第二个并应用 bg-purple-500 样式
   */
  (matcher) => {
    const parentPrefix = "nth-son-html-";
    if (!matcher.startsWith(parentPrefix)) return matcher;
    // 提取标签名、索引和实际的样式匹配器
    const [tagAndIndex, ...rest] = matcher.slice(parentPrefix.length).split(":");
    const [tag, index] = tagAndIndex.split("-");
    const newMatcher = rest.join(":");
    return {
      matcher: newMatcher, // 去掉 'nth-son-html-<tag>-<index>:' 前缀
      selector: (s) => `${s} > ${tag}:nth-of-type(${index})` // 选择子级为指定标签的第 index 个元素
    };
  }
];

export default variants;
